let Header = React.createClass({
    getDefaultProps(t, e) {
        return JSON.parse(sessionStorage.user_info);
    },
    propTypes: {
        name: React.PropTypes.number.isRequired,
    },
    getInitialState() {
        return {
            data: 0
        };
    },
    componentWillMount() {
        console.log('componentWillMount')
    },
    componentDidMount() {
        console.log('componentDidMount')
    },
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    },
    componentWillUpdate() {
        console.log('componentWillUpdate')
    },
    componentDidUpdate() {
        console.log('componentDidUpdate')
    },
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps');
    },
    componentWillUnmount() {
        console.log('componentWillUnmount');
    },
    render: function () {
        return <div className="row">
            <nav className="navbar navbar-expand bg-dark navbar-dark col-12">
                <a className="navbar-brand  col-2" href="#">
                    <img src={sessionStorage.contextPath + "/images/fbcd32fb2c580a17e3e3b43aa52ef048_t0195051fd2e2d0b552.gif"}
                         className="img-fluid rounded" alt="logo"/>
                </a>
                <ul className="navbar-nav justify-content-end col-10">
                    <li className="nav-item col-3">
                        <a className="" href="#">
                            <img src={this.props.headimgurl} className="rounded-circle img-fluid img-thumbnail"
                                 alt="logo"/>
                        </a>
                    </li>
                    <li className="nav-item text-nowrap col-3" style={{textOverflow:'ellipsis',overflow:'hidden'}}>
                        <a className="nav-link" href="#">{this.props.nickname}</a>
                    </li>
                    <li className="nav-item col-4">
                        <a className="nav-link" href="#">设置</a>
                    </li>
                </ul>
            </nav>
        </div>;
    }
});

let Progress = React.createClass({
    getInitialState() {
        return {
            progress: '70%'
        };
    },
    render: function () {
        return <div className="row">
            <div className="progress">
                <div className="progress-bar" style={{width:this.state.progress}} ></div>
            </div></div>;

    }
});
let Card = React.createClass({
    getInitialState() {
        return {

        };
    },
    render: function () {
        return <div className="row">
            <audio controls>
                    <source  src={sessionStorage.contextPath + "/images/ysz-by.mp3"} type="audio/mpeg"/>
            </audio>
          </div>;

    }
});

ReactDOM.render(
    <div className="container">
        <Header/>
        <Card/>
    </div>
    ,
    document.getElementById('root')
);